<!DOCTYPE html>
<html>
<head th:include="include/head">

</head>
<body class="hold-transition sidebar-mini layout-fixed">
	<div class="wrapper">


		<div class="content-wrapper">
			<!-- Content Header (Page header) -->
			<section class="content-header">
				<div class="container-fluid">
					<div class="row mb-2">
						<div class="col-sm-6">
							<h1>用户管理</h1>
						</div>
						<div class="col-sm-6">
							<ol class="breadcrumb float-sm-right">
								<li class="breadcrumb-item"><a href="#">首页</a></li>
								<li class="breadcrumb-item active">用户管理</li>
							</ol>
						</div>
					</div>
				</div>
				<!-- /.container-fluid -->
			</section>
			<section class="content">
				<div class="card card-info">
					<div class="card-header">
						<h3 class="card-title">用户信息管理</h3>
					</div>
					<!-- /.card-header -->
					<!-- form start -->
					<form class="form-horizontal" id="form" method="post"
						th:action="@{/user/userSave}">
						<input type="hidden" name="id" id="id" th:value="${bean.id}" />
						<div class="card-body">
							<div class="form-group row">
								<label for="username" class="col-sm-2 col-form-label">用户名</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" name="username"
										id="username" placeholder="用户名" aria-required="true"
										th:value="${bean.username}">
										<label class="help-block m-b-none" for="username" id="username-error"><i class="far fa-bell"></i>必填项</label>
								</div>
							</div>
							<div class="form-group row">
								<label for="password" class="col-sm-2 col-form-label">密码</label>
								<div class="col-sm-10">
									<input type="password" class="form-control" name="password"
										id="password" placeholder="密码" aria-required="true">
										<label class="help-block m-b-none" for="password" id="password-error"><i class="far fa-bell"></i>必填项</label>
								</div>
							</div>
							<div class="form-group row">
								<label for="inputPassword3" class="col-sm-2 col-form-label">重复密码</label>
								<div class="col-sm-10">
									<input type="password" class="form-control" name="password1"
										id="password1" placeholder="重复密码" aria-required="true">
										<label class="help-block m-b-none" for="password1" id="password1-error"><i class="far fa-bell"></i>必填项</label>
								</div>
							</div>
							<div class="form-group row">
								<label for="inputPassword3" class="col-sm-2 col-form-label">状态</label>
								<div class="col-sm-10">
									<select id="state" name="state" class="form-control">
									<option value="">请选择</option>
									<option value="1" th:selected="${bean.state}==1">启用</option>
									<option value="-1" th:selected="${bean.state}==-1">禁用</option>
									</select>
										<label class="help-block m-b-none" for="state" id="state-error"><i class="far fa-bell"></i>必填项</label>
								</div>
							</div>
							<div class="form-group row">
								<label for="roleId" class="col-sm-2 col-form-label">角色</label>
								<div class="col-sm-10">
									<select id="roleId" name="roleId" class="form-control"
										aria-required="true">
										<option value="">请选择</option>
										<option th:each="role : ${roleList}" th:value="${role.id}" th:data="${role.name}"
											th:text="${role.descritpion}" th:selected="${role.id}==${roleId}"></option>
									</select>
									<label class="help-block m-b-none" for="roleId" id="roleId-error"><i class="far fa-bell"></i>必填项</label>
								</div>


<!-- 							<div class="form-group row"> -->
<!-- 								<label for="inputPassword3" class="col-sm-2 col-form-label">绑定社区</label> -->
<!-- 								<div class="col-sm-10"> -->
<!-- 									<select id="comId" name="comId" class="form-control" -->
<!-- 										aria-required="true"> -->
<!-- 										<option value="">请选择</option> -->
<!-- 										<option th:each="com : ${communityList}" th:value="${com.comId}" -->
<!-- 											th:text="${com.comName}" th:selected="${com.comId}==${comId}"></option> -->
<!-- 									</select> -->
<!-- 									<label class="help-block m-b-none" for="comId" id="comId-error"><i class="far fa-bell"></i>必填项</label> -->
<!-- 								</div> -->
<!-- 							</div> -->
						</div>
							<div class="form-group row" th:if="${baseList}">
								<label for="baseId" class="col-sm-2 col-form-label">基地</label>
								<div class="col-sm-10">
									<select id="baseId" name="baseId" class="form-control"  required
											aria-required="true">
										<option value="">请选择</option>
										<option th:each="model : ${baseList}" th:value="${model.baseId}"
												th:text="${model.baseName}" th:selected="${model.baseId}==${userBase.baseId}"></option>
									</select>
									<label class="help-block m-b-none" for="baseId" id="baseId-error"><i class="far fa-bell"></i>必填项</label>
								</div>
							</div>
							<div class="form-group row" id="project" th:style="'display:' + @{(${role.name=='ROLE_USER'} ? '' : 'none')} + ''">
								<label for="baseId" class="col-sm-2 col-form-label">项目</label>
								<div class="col-sm-10">
									<select id="projectId" name="projectId" class="form-control"  required
											aria-required="true">
										<option value="">请选择</option>
										<option th:each="model : ${projectList}" th:value="${model.projectId}"
												th:text="${model.projectName}" th:selected="${model.projectId}==${examiner.projectId}"></option>
									</select>
									<label class="help-block m-b-none" for="projectId" id="projectId-error"><i class="far fa-bell"></i>必填项</label>
								</div>
							</div>
							<div class="form-group row"  id="eName" th:style="'display:' + @{(${role.name=='ROLE_USER'} ? '' : 'none')} + ''">
								<label for="examinerName" class="col-sm-2 col-form-label">真实姓名</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" name="examinerName"  required
										   id="examinerName" placeholder="用户名" aria-required="true"
										   th:value="${examiner.examinerName}">
									<label class="help-block m-b-none" for="examinerName" id="examinerName-error"><i class="far fa-bell"></i>必填项</label>
								</div>
							</div>
						<!-- /.card-body -->
						<div class="card-footer">
							<button type="submit" class="btn btn-info">保存</button>
							<button type="button" class="btn btn-default float-right"
								id="back">取消</button>
						</div>
						<!-- /.card-footer -->
					</form>
				</div>
			</section>

		</div>
	</div>
	<!-- ./wrapper -->
	<div th:include="include/foot"></div>
	<script>
		$.validator.setDefaults({
			highlight : function(a) {
				$(a).removeClass("is-valid").addClass(
						"is-invalid");
			},
			success : function(a) {
				$(a).prev().removeClass("is-invalid").addClass(
						"is-valid");
				$(a).html('<i class="fas fa-check"></i>验证成功');
			},
			errorClass:"help-block m-b-none",
// 			validClass:"help-block m-b-none",
			errorPlacement:function(a,b){
				if(b.is(":radio")||b.is(":checkbox")){
					a.appendTo(b.parent().parent().parent())
					}else{
						a.appendTo(b.parent())
						}},
					submitHandler:function(form){loadPage();form.submit();}
		});
		$.validator.addMethod("checkUsername", function(value, element) {
			if (value == '') {
				return true;
			}
			let result = false;
			let id = $("#id").val();
			$.ajax({
				url : 'checkUserName?id=' + id + '&username=' + value,
				async : false,
				success : function(e) {
					result = e.res;
				},error:function(e){
					layer.msg(e.responseText, {icon: 5});
				}
			});
			return result;
		}, "");
		$().ready(function() {
			$("#back").click(function() {
				loadPage();
				location.href = 'userList';
			});
			$("#baseId").change(function (){
				let v=$(this).val();
				let t= $(this).find("option:selected").text();
				console.log(v,t)
				if(v>0){
					$("#baseName").val(t);
					$.ajax({url:'../library/projectList',data:"baseId="+v,success:function (data){
							console.log(data)
							if(data.res){
								$("#projectId").empty();
								$("#projectId").append("<option value=''>请选择</option>");
								for(let i=0;i<data.list.length;i++){
									console.log(data.list[i])
									$("#projectId").append("<option value='"+data.list[i].projectId+"'>"+data.list[i].projectName+"</option>");
								}

							}
						}})
				}else {
					$("#projectId").empty();
					$("#projectId").append("<option value='0'>全部门</option>");
				}

			});
			$("#roleId").change(function() {
				let v=$(this).val();
				let t= $(this).find("option:selected").text();
				let data= $(this).find("option:selected").attr('data');
				console.log(v,t,data)
				if (data=='ROLE_USER'){
					console.log('面试官')
					$('#project').show()
					$('#eName').show()
				}else {
					$('#project').hide()
					$('#eName').hide()
					console.log('其他的')
				}
			});
			$("#form").validate({
				rules : {
					username : {
						required : true,
						checkUsername : true
					},
					password : "required",
					password1 : {
						required : true,
						equalTo : '#password'
					},
					roleId : {
						required : true,
						minlength : 1
					},
					state:{
						required : true,
						minlength : 1
					}
// 					,
// 					comId:{
// 						required : true,
// 						minlength : 1
// 					}
				},
				messages : {
					username : {
						required : '<i class="far fa-times-circle"></i>请输入用户名',
						checkUsername : '<i class="far fa-times-circle"></i>用户名已经使用'
					},
					password : '<i class="far fa-times-circle"></i>请输入密码',
					password1 : {
						required : '<i class="far fa-times-circle"></i>请输入重复密码',
						equalTo : '<i class="far fa-times-circle"></i>两次密码输入不一致'
					},
					roleId : '<i class="far fa-times-circle"></i>请选择角色',
					state:'<i class="far fa-times-circle"></i>请选择状态'
// 					,
// 					comId:'<i class="far fa-times-circle"></i>请绑定社区'
				}
			});
		});
		loadPage=function(){
			window.parent.loadPage();
		}
	</script>
</body>
</html>